專案使用到的工具整理

• 終端工具（Terminal）: Mac 系統下的內建工具
• Cygwin: Windows 系統下的 Unix 模擬工具
• Node.js: JavaScript 運行環境
• npm: Node.js 的包管理器
• Vite CLI: 前端開發和打包工具
• vi 編輯器: 文字編輯器，用於創建 Shell 腳本
• GitHub Pages: 用於發佈網站的平台

專案建置說明

建立網站專案其實只要下幾個基本的指令就可以做到，現在都有許多方便的專案建置工具。基於開發習慣不同，個人因為比較習慣 Unix 檔案結構的關係，習慣操作指令介面來管理專案的檔案。作業系統如果是 Mac 就直接使用 termial 工具， 如果是在 windows 上，我改成使用 Cygwin 這個工具，讓我可以操作 termial 指令介面直接在不同檔案之間移動。(但我其實有認真考慮要不要習慣使用 GUI )。

這一次專案架構會以 Vue 為 JS 框架，並建置在 github page 上面，而遊戲有開始、進行、結束三個頁面，就以 SPA 單頁為 Web app 開發實作。使用 vite cli 作為這次建置專案的開發工具，環境基本上已安裝 node 跟 npm 與 vite cli 工具就沒問題，如未安裝可參考 node 與 vite 文件。我要建立一個名稱叫做 TimelineQuest-ithelp-sample，並確定可以在本地端開發。因為每次都要下許多指令，這次專案建置想說練習將建置寫成一個 shell script 腳本，不用重複下指令讓建置過程更為流暢。

建立自動化專案建置腳本

使用內建的 vi 編輯器，建立一個副檔名為 .sh 的文件，例如 setup-vue-vite-project.sh。
setup-vue-vite-project.sh 是一個簡單的 shell 腳本，用於自動執行建立專案步驟。這個腳本會安裝 Vite CLI（如果尚未安裝）、創建一個新的 Vue.js + Vite 項目，並安裝所需的相依套件。

#!/bin/bash
# 檢查 Node.js 和 npm 是否已安裝
if ! command -v node &> /dev/null
then
    echo "Node.js 未安裝，請先安裝 Node.js"
    exit
fi
if ! command -v npm &> /dev/null
then
    echo "npm 未安裝，請先安裝 npm"
    exit
fi
# 安裝 Vite CLI
if ! command -v create-vite &> /dev/null
then
    echo "正在安裝 Vite CLI..."
    npm install -g create-vite
fi
# 創建新的 Vue.js + Vite 項目
echo "請輸入新專案的名稱："
read project_name
create-vite $project_name --template vue
# 進入專案目錄並安裝相依套件
cd $project_name
npm install
# 啟動開發本地伺服器
echo "是否要立即啟動開發本地伺服器？ (y/n)"
read answer
if [ "$answer" == "y" ]; then
    npm run dev
fi

執行腳本：

./setup-vue-vite-project.sh

對於不想逐步跟隨發文內容的朋友，這裡是專案成果的 GitHub 連結，歡迎留言或 PR 喔。
明天我們將進行詳細的盤點，以確定還需要安裝哪些開發必備的套件。

參考資料：
Node.js 是什麼？NPM又是什麼？